<jsp:include page="header.jsp" />

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Part 1</title>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

    <style type="text/css">
      #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
      }
    </style>
    
    	<hr class="noscreen" />

	<h1 id="title">Date Location Finder!</h1>

	<!-- Three columns -->
    
    
        <script type="text/javascript">
      var map;
      var infowindow;

      <%-- Initializes the Map at the listed LatLng --%>
      function initialize() {
    	geocoder = new google.maps.Geocoder();
        var map = new google.maps.LatLng(49.28203, -123.12078);
        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: map,
          zoom: 13
        });

        <%-- States the type of location for the date in 500 radius from center of map --%>
        var request = {
          location: map,
          radius: 500,
          types: ['<%=session.getAttribute("dateLoc")%>']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }

      <%-- Creates markers for locations listed within the 500 radius --%>
      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

      <%-- Creates Markers --%>
      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        <%-- When clicked on marker, the info window is shown. --%>
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="text">
      <pre>
      
<%-- For debugging to test of suggested date locations show up --%>
var request = {
  location: new google.maps.LatLng(49.28203, -123.12078),
  radius: 500,
  types: ['<%=session.getAttribute("dateLoc")%>']
};


<form action="/UBCDatingServer/googlemap" method="post"> 
<input type="radio" name="type" value="amusement_park" /> Amusement Park<BR>
<input type="radio" name="type" value="aquarium" /> Aquarium<BR>
<input type="radio" name="type" value="art_gallery" /> Art Gallery<BR>
<input type="radio" name="type" value="bar" /> Bar<BR>
<input type="radio" name="type" value="bowling_alley" /> Bowling Alley<BR>
<input type="radio" name="type" value="casino" /> Casino<BR>
<input type="radio" name="type" value="movie_theatre" /> Movie Theatre<BR>
<input type="radio" name="type" value="museum" /> Museum<BR>
<input type="radio" name="type" value="night_club" /> Night Club<BR>
<input type="radio" name="type" value="park" /> Park<BR>
<input type="radio" name="type" value="restaurant" /> Restaurant<BR>
<input type="radio" name="type" value="shopping_mall" /> Shopping Mall<BR>
<input type="radio" name="type" value="spa" /> Spa<BR>
<input type="radio" name="type" value="zoo" /> Zoo
<p class="nomb"><input type="submit" value="Submit desired date location" class="radio-submit"/></p>

</form> 
      </pre>
  </body>
	<jsp:include page="footer.jsp"></jsp:include>
</html>
